<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>モーション：設定の手順 | アクションゲームツクールMV ヘルプ</title>
        <meta name="description" content="ツクールシリーズ最新作『アクションゲームツクールMV』Steamアーリーアクセス開始！">
        <meta name="keywords" content="ツクールMV,MV,ツクール,ツクールシリーズ,アクションゲームツクールMV,アクションゲームツクール,PixelGameMakerMV，PixelGameMaker">
        <link rel="icon" href="./favicon.ico">
        <!-- スタイルシート -->
        <link rel="stylesheet" href="./common/css/q-reset.css">
        <link rel="stylesheet" href="./common/drawer/drawer.min.css">
        <link rel="stylesheet" href="./common/css/common.css">
    </head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-118975509-1"></script>
    <!-- Google Analytics -->
    <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-118975509-1', 'auto');
    ga('send', 'pageview');
    </script>
    <!-- End Google Analytics -->
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-118975509-1');
    </script>

    <body id="menu05" class="flex bet drawer drawer--left">
        <header class="header">
            <button type="button" class="drawer-toggle drawer-hamburger">
                <span class="sr-only">toggle navigation</span>
                <span class="drawer-hamburger-icon"></span>
            </button>
            <nav id="nav_area" class="drawer-nav" role="navigation">
                <div class="drawer-menu">
                    <h1 class="drawer-navh1">
                        <a href="./index.html">
                            <picture>
                                <source srcset="./common/img/title_logo.png" media="(min-width: 641px)">
                                <img src="./common/img/title_logo_sp.png" alt="logo">
                            </picture>
                        </a>
                    </h1>
                    <dl>
                        <dt class="drawer-dropdown menu01"><a class="drawer-menu-item">はじめに</a></dt>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./01_01.html">アクションゲームツクールMVとは</a></dd>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./01_02.html">このソフトの特徴</a></dd>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./01_03.html">ゲーム作成の始め方</a></dd>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./01_04.html">ゲーム作成の基本</a></dd>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./01_05.html">完成したゲームを遊ぶには</a></dd>
                        <dt class="drawer-dropdown menu02"><a class="drawer-menu-item">エディターの基本情報</a></dt>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./02_01.html">画面の見方と基本操作</a></dd>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./02_02.html">メニューバーについて</a></dd>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./02_03.html">設定メニュー</a></dd>
                        <dt class="drawer-dropdown menu03"><a class="drawer-menu-item">シーン</a></dt>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./03_01.html">シーンとは</a></dd>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./03_02.html">シーン画面</a></dd>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./03_03.html">シーンを追加する</a></dd>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./03_04.html">タイルを配置する</a></dd>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./03_05.html">他のパーツを配置する</a></dd>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./03_06.html">配置したパーツの設定を行う</a></dd>
                        <dt class="drawer-dropdown menu04"><a class="drawer-menu-item">タイル</a></dt>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./04_01.html">タイルとは</a></dd>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./04_02.html">タイルの詳細設定</a></dd>
                        <dt class="drawer-dropdown menu05"><a class="drawer-menu-item">アニメーション</a></dt>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./05_01.html">アニメーションとは</a></dd>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./05_02.html">アニメーションを追加する</a></dd>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./05_03.html">モーション：画面の見方</a></dd>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./05_04.html">モーション：設定の手順</a></dd>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./05_05.html">エフェクトアニメーション</a></dd>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./05_06.html">パーティクルアニメーション</a></dd>
                        <dt class="drawer-dropdown menu06"><a class="drawer-menu-item">オブジェクト</a></dt>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./06_01.html">オブジェクトとは</a></dd>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./06_02.html">オブジェクト画面</a></dd>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./06_03.html">アクションプログラム</a></dd>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./06_04.html">オブジェクトの詳細設定</a></dd>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./06_05.html">その他の設定項目</a></dd>
                        <dt class="drawer-dropdown menu07"><a class="drawer-menu-item">素材</a></dt>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./07_01.html">素材とは</a></dd>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./07_02.html">素材を追加する</a></dd>
                        <dt class="drawer-dropdown menu08"><a class="drawer-menu-item">遷移</a></dt>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./08_01.html">遷移とは</a></dd>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./08_02.html">画面フロー</a></dd>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./08_03.html">ポータル移動</a></dd>
                        <dt class="drawer-dropdown menu09"><a class="drawer-menu-item">プラグイン</a></dt>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./09_01.html">プラグインとは</a></dd>
                        <dt class="drawer-dropdown menu10"><a class="drawer-menu-item">資料集</a></dt>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./10_01.html">素材とデータ</a></dd>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./10_02.html">プラグインについて</a></dd>
                        <dt class="drawer-dropdown menu11"><a class="drawer-menu-item">その他</a></dt>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./11_01.html">使用許諾契約書</a></dd>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./11_02.html">商標・登録商標について</a></dd>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./11_03.html">スタッフクレジット</a></dd>
                        <dd class="drawer-dropdown-menu"><a class="drawer-dropdown-menu-item" href="./11_04.html">ユーザーサポート</a></dd>
                    </dl>
                </div>
            </nav>
        </header>

        <main class="main">
            <article>
                <section>
                    <h2 class="main_h2"><span class="main_h2span">アニメーション</span>モーション：設定の手順</h2>
                    <h3 class="main_h3 main_h3--lineone">素材の原点を設定する</h3>
                    <p class="main_txt">「原点」はオブジェクトをシーンに配置したり、他のオブジェクトに接続する際の基準となる位置です。原点は使用する素材ごとに設定する必要があります。<br />アニメーション一覧でモーションアニメーションを選択すると、詳細設定エリアで各素材の原点を設定できます。「登録されている素材」の一覧から設定するものを選び、原点を指定しましょう。</p>
                    <h4 id="02" class="main_h4">原点と中心点</h4>
                    <p class="main_txt">プレビューエリアに表示されたうち、赤線の縦軸と横軸が交わる点が原点です。赤い四角の点は「中心点」で、画像に変倍をかけたり、回転させたりするときの基準の位置となります。青い囲み線は素材の縁を表します。</p>
                    <p class="main_img"><img src="./img/05/05_04_01.png" alt=""></p>
                    <h3 class="main_h3 main_h3--lineone">モーションを追加する</h3>
                    <p class="main_txt">アニメーション管理エリアでは、それぞれの欄の右上にある「＋」をクリックすると、新しい項目を追加できます。また、「－」をクリックすると、選んでいる項目を削除できます。新たなモーションを追加したときは、必要に応じて表示方向を追加したあと、それぞれに対しフレームを設定しましょう。</p>
                    <p class="main_img"><img src="./img/05/05_04_02.png" alt=""></p>
                    <h4 class="main_h4">モーションの基本設定</h4>
                    <p class="main_txt">「モーション」の項目を選ぶと、詳細設定エリアでモーション全体にかかわる設定が行えます。</p>
                    <table class="main_table">
                        <tr class="main_tr">
                            <th class="main_th">アニメーションの基本情報</th>
                            <td class="main_td">「表示するフレーム数」を設定すると、新しいフレームを追加したとき、デフォルトのフレーム数が設定した数値になります。また、ループの設定も行えます。</td>
                        </tr>
                        <tr class="main_tr">
                            <th class="main_th">登録されている素材</th>
                            <td class="main_td">登録した素材を確認できます。</td>
                        </tr>
                    </table>
                    <h4 class="main_h4">表示方向の設定</h4>
                    <p class="main_txt">「表示方向」の項目を選ぶと、詳細設定エリアで「表示方向の設定」が行えます。また、選択中の表示方向に含まれるフレームを設定する際に、元素材として使用する画像を設定できます。</p>
                    <p class="main_txt main_txt--ind">※1つの表示方向内で設定できる画像は1つのみです。</p>
                    <h4 class="main_h4">フレームの基本設定</h4>
                    <p class="main_txt">「フレーム」に項目を追加したら、詳細設定エリアで以下の設定を行ってください。</p>
                    <p class="main_txt main_txt--ind">※フレームの各項目に表示されている数字は、フレームが開始する秒数（s）とフレーム数（f）です。</p>
                   <table class="main_table">
                        <tr class="main_tr">
                            <th class="main_th">基本設定</th>
                            <td class="main_td">フレームが表示される長さ（フレーム数）を設定できます。フレームの表示中にSEや音声を鳴らす設定も可能です。また、「補間」を設定すると、前後のフレームと画像や判定の位置や大きさが変わったとき、その間が自動的に補われます。</td>
                        </tr>
                        <tr class="main_tr">
                            <th class="main_th">表示関連</th>
                            <td class="main_td">オフセット（画像の位置）や中心点、スケール（画像の変倍率）などを指定できます。また、画像の反転や回転、色相の調整なども行えます。<br />※「オフセット」では、画像や各種判定の位置関係を保持したまま、位置を調整することが可能です。</td>
                        </tr>
                        <tr class="main_tr">
                            <th class="main_th">フレームに表示する画像を選択</th>
                            <td class="main_td">選択した画像のプレビューが表示されます。赤枠で選択した部分が、フレームの画像として使用されます。<br />※赤枠のサイズは、画像分割で設定されたものになります。</td>
                        </tr>
                    </table>
                    <h3 class="main_h3 main_h3--lineone">キーフレームを設定する</h3>
                    <p class="main_txt">アニメーション管理エリアでフレームを選択すると、その詳しい内容がタイムラインエリアに表示されます。タイムラインでは、フレームの1コマ1コマを選んで、そこにさまざまな判定の「キーフレーム」を追加できます。</p>
                    <h4 id="01" class="main_h4">タイムラインエリアの見方</h4>
                    <p class="main_img"><img src="./img/05/05_04_03.png" alt=""></p>


                    <dt class="main_dt"><span class="main_num">1</span>表示幅調節スライダー</dt>
                    <dd class="main_dd">スライダーをドラッグするか、左右の「＋」「－」ボタンをクリックすると、タイムライン全体の左右幅を調節することができます。</dd>

                    <dt class="main_dt"><span class="main_num">2</span>タイムライン</dt>
                    <dd class="main_dd">1つ1つのコマが1フレームを表します。左端がアニメーションの開始点で、右端が終点です。<br />キーフレームの配置されているフレームは黒、判定などが設定されているフレームは濃いグレー、空のキーフレームがあるフレームは白で表示されます。<br />配置されたキーフレームは、同じ項目内ならドラッグして移動できます。</dd>

                    <dt class="main_dt"><span class="main_num">3</span>タイムラインの項目</dt>
                    <dd class="main_dd">右クリックすると、コンテキストメニューで項目を追加したり、削除したりできます。また、右端にあるアイコンをクリックすると、項目をロック（編集不可）したり、プレビューエリアで非表示にしたりできます。</dd>
                    <dd class="main_dd main_dd--ind">※プレビューエリアで非表示にした判定も、ゲーム内では機能します。</dd>
                    <dd class="main_dd">
                        <table class="main_table main_table--under">
                            <tr class="main_tr">
                                <th class="main_th">フレーム</th>
                                <td class="main_td">フレームのタイムラインでは、配置されているフレームが切り替わる位置を、キーフレームで示します。</td>
                            </tr>
                           <tr class="main_tr">
                                <th class="main_th">壁判定</th>
                                <td class="main_td">オブジェクトがタイルなどに接触したとき、通り抜けできるか、それともぶつかるかは、互いの壁判定の範囲で判断されます。壁判定のタイムラインでは、各フレームに壁判定が設定されているかを確認できます。</td>
                            </tr>
                           <tr class="main_tr">
                                <th class="main_th">当たり判定</th>
                                <td class="main_td">当たり判定は、敵の攻撃を受け付ける範囲を指します。当たり判定のタイムラインでは、各フレームに当たり判定が設定されているかを確認できます。</td>
                            </tr>
                           <tr class="main_tr">
                                <th class="main_th">攻撃判定</th>
                                <td class="main_td">攻撃判定は、触れた敵にダメージを与える範囲を指します。攻撃判定のタイムラインでは、各フレームに攻撃判定が設定されているかを確認できます。</td>
                            </tr>
                           <tr class="main_tr">
                                <th class="main_th">接続点</th>
                                <td class="main_td">あるオブジェクトに、別のオブジェクトをくっつけて表示させるとき、2つのオブジェクトをつなげる位置が接続点です。接続点のタイムラインでは、各フレームに接続点が設定されているかを確認できます。</td>
                            </tr>
                        </table>
                    </dd>
                    <h4 class="main_h4">キーフレームを追加する</h4>
                    <p class="main_txt">タイムラインのフレームを選んで右クリックし、「キーフレームを追加」を選ぶと、キーフレームを追加できます。また、フレームを選んで詳細設定エリアの「基本設定」からキーフレームを設定することも可能です。<br />各判定や接続点にキーフレームを追加すると、それ以降のフレームが「判定あり」となります（判定や接続点の形状は、キーフレームの設定に準じます。途中で新たなキーフレームを追加することで、形状を変更することが可能です）。また、判定があるフレームで「空のキーフレームを追加」を選ぶと、それ以降のフレームが「判定なし」になります。</p>
                    <h4 class="main_h4">判定や接続点の形状を設定する</h4>
                    <p class="main_txt">各判定の範囲は、四角形で設定できます。詳細設定エリアの「サイズと位置を指定」で設定が可能です。<br />また、プレビューエリアで判定を選択し、ドラッグ操作で移動や変形することもできます。<br />接続点も同様ですが、位置のみ指定できます。</p>
                    <p class="main_img"><img src="./img/05/05_04_04.png" alt=""></p>
                </section>
            </article>
        </main>

        <!-- javascript -->
        <script src="./common/js/jquery224min.js"></script>
        <script src="./common/js/run.js"></script>
        <script src="./common/drawer/iscroll.js"></script>
        <script src="./common/drawer/drawer.min.js"></script>
        <script>
            $(function() {
                if (window.matchMedia( '(max-width: 1280px)' ).matches) {
                    $('.drawer').drawer();
                }
            });
        </script>
    </body>
</html>